<template>
  <el-card class="card_Search">
    <el-input
      class="input_Search"
      v-model="ProjectSearch.projectNameOrNum"
      placeholder="请输入相关搜索条件"
      @change="GetProjectReimbursement()"
    ></el-input>
    <el-drawer
      v-model="drawer"
      title="高级查询"
      :direction="direction"
      :before-close="handleClose"
    >
      <AdvancedQuery @passfunction="passfunction"></AdvancedQuery>
    </el-drawer>

    <el-button @click="drawer = true" type="primary" style="float: right"
      >高级查询</el-button
    >
  </el-card>

  <el-table title="项目报销列表" height="250px" :data="ProjectReimbursement">
    <el-table-column type="selection" />
    <el-table-column prop="projectNumber" label="项目编号"></el-table-column>
    <el-table-column prop="projectName" label="项目名称"></el-table-column>
    <el-table-column prop="projectStarttime" label="立项时间"></el-table-column>
    <el-table-column prop="projectPerson" label="负责人"></el-table-column>
    <el-table-column prop="projectMoney" label="总经费（万）"></el-table-column>
    <el-table-column
      prop="allocationExpenditure"
      label="可报销总经费(元)"
    ></el-table-column>
    <el-table-column
      prop="reimbursedExpenses"
      label="已报销(元)"
    ></el-table-column>
    <el-table-column
      prop="remainingFunds"
      label="剩余可报销(元)"
    ></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="GetSubject(scope.row)" type="text"
          >进入项目报销</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="ProjectSearch.index"
    v-model:page-size="ProjectSearch.size"
    :page-sizes="[5, 10, 15, 20]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="ProjectTotal"
    @size-change="ProjecthandleSizeChange"
    @current-change="ProjecthandleCurrentChange"
  />
  <br /><br />
  <el-button
    v-for="(item, index) in BudgeSubjectList"
    :key="index"
    :label="item.subjectId"
    @click="JumpForm(item.subjectId, item.projectId)"
    >{{ item.budgetitemName }}</el-button
  >

  <br /><br />
  <el-table v-loading="Loging" title="报销信息列表" height="250px" :data="ApplyMessage">
    <el-table-column type="selection" />
    <el-table-column prop="id" label="报销编号"></el-table-column>
    <el-table-column prop="subjectName" label="报销科目"></el-table-column>
    <el-table-column
      prop="specialMoney"
      label="专项报销金额(元)"
    ></el-table-column>
    <el-table-column
      prop="supportMoney"
      label="配套报销金额(元)"
    ></el-table-column>
    <el-table-column prop="reviewProgress" label="审核进度"></el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-link
          v-for="(item, index) in scope.row.operate"
          :key="index"
          size="mini"
          type="warning"
          @click="Audit(index, item, scope.row.id)"
          >{{ item.Name }}</el-link
        >&nbsp;
        <el-button @click="PrintAuthorization(scope.row)" type="text"
          >打印审批单</el-button
        >
        <el-button @click="ApplyFor(scope.row)" type="text">详情</el-button>
        <el-button @click="DelApplyFor(scope.row)" type="text">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="ApplySearch.index"
    v-model:page-size="ApplySearch.size"
    :page-sizes="[5, 10, 15, 20]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="ProjectApplyTotal"
    @size-change="ApplyhandleSizeChange"
    @current-change="ApplyhandleCurrentChange"
  />
</template>

<script>
import AdvancedQuery from "../../components/Query/AdvancedQuery.vue";
export default {
  components: {
    AdvancedQuery,
  },
  data() {
    return {
      ProjectReimbursement: [],
      ProjectSearch: {
        projectNameOrNum: "",
        projectStarttime: null, //项目开始时间
        projectEndtime: null, //项目结束时间
        projectPerson: "", //负责人
        index: 1,
        size: 5,
      },
      Loging:false,
      ProjectTotal: 0,
      ApplyMessage: [],
      ApplySearch: {
        index: 1,
        size: 5,
      },
      ProjectApplyTotal: 0,
      BudgeSubject: undefined,
      BudgeSubjectList: [],
      ProjectId: undefined,
      drawer: false,
      UserInfor: "",
    };
  },
  created() {
    this.GetProjectReimbursement();
  },
  methods: {
    //获取所有项目信息
    GetProjectReimbursement() {
      this.http
        .post(
          "api/tb_project_expensebaseinfo/GetExpensesReimbursement",
          this.ProjectSearch
        )
        .then((res) => {
          this.ProjectReimbursement = res.data.list;
          console.log(this.ProjectReimbursement, "this.ProjectReimbursement");
          this.ProjectTotal = res.data.numCount;
        });
    },
    GetSubject(row) {
      this.Loging=true;
      this.http
        .get(
          "api/tb_project_fundingsubject_realition/GetFundingSubject_RelationList?projectId=" +
            row.projectId
        )
        .then((res) => {
          if (res.status) {
            //console.log(res.data);
            this.BudgeSubjectList = res.data;
            this.ProjectId = row.projectId;
            this.GetAccountReimbursement();
          }
        });
    },
    //子传父
    passfunction(val) {
      this.ProjectSearch.projectStarttime = val.projectStarttime;
      this.ProjectSearch.projectEndtime = val.projectEndtime;
      this.ProjectSearch.projectPerson = val.projectPerson;
      this.GetProjectReimbursement();
    },
    GetAccountReimbursement() {
      console.log(this.ProjectId);
      this.http
        .post(
          "api/tb_project_expensebaseinfo/GetAccountReimbursement?ProjectId=" +
            this.ProjectId
        )
        .then((res) => {
          if (res.status) {
            console.log(res.data.list);
            res.data.list.forEach((element) => {
              if (element.operate == "") {
                element.operate = [];
              } else {
                element.operate = JSON.parse(element.operate);
              }
            });
            // console.log(res, "list");
            this.ApplyMessage = res.data.list;
            console.log(res.data.list);
            this.ProjectApplyTotal = res.data.count;
          }
          this.Loging=false;
        });
        
    },
    Audit(index, row, id) {
      this.$router.push("/ExpenseAduit?id=" + id+"&stepId="+row.Field);
    },
    ProjecthandleSizeChange(val) {
      this.ProjectSearch.size = val;
      this.GetProjectReimbursement();
    },
    ProjecthandleCurrentChange(val) {
      this.ProjectSearch.index = val;
      this.GetProjectReimbursement();
    },
    ApplyhandleSizeChange(val) {
      this.ApplySearch.size = val;
      GetAccountReimbursement();
    },
    ApplyhandleCurrentChange(val) {
      this.ApplySearch.index = val;
      GetAccountReimbursement();
    },
    JumpForm(subjectId, projectId) {
      window.location.href =
        "http://localhost:8098/#/SubjectApply?SubjectId=" +
        subjectId +
        "&&" +
        "ProjectId=" +
        projectId;
    },
    //打印审批单
    PrintAuthorization(row) {
      console.log(row);
      window.location.href =
        "http://localhost:8098/#/PrintAuthorization?SubjectId=" +
        row.subjectId +
        "&&" +
        "ApplyId=" +
        row.id;
    },
  },
};
</script>

<style scoped>
.input_Search {
  width: 90%;
  height: 90%;
}

.card_Search {
  background-color: #ebeef5;
  margin: 5px;
}

.el-pagination {
  float: right;
}
</style>